import React, {PureComponent} from 'react';
import {Link} from 'react-router-dom';
import {Avatar, Icon, Menu} from 'antd';
import classNames from 'classnames';
import DropOption from '../../../../commons/components/DropOption';
import {seiLocale} from 'sei-utils';
import styles from './index.module.less';

const {Item, Divider} = Menu;
const {seiIntl} = seiLocale;
const userMenus = [
  {
    "icon": "setting",
    "key": "setting",
    "i18n": "avatar.setting",
    "title": "个人设置"
  },
  {
    "icon": "poweroff",
    "i18n": "avatar.logout",
    "key": "logout",
    "title": "退出"
  }
];

export default class GlobalAvatarUser extends PureComponent {
  getMenuItem = (menus, onMenuClick) => (
    <Menu onClick={onMenuClick} selectedKeys={[]}>
      {menus.map(m => {
        if (typeof m === 'string') {
          return <Divider key={m}/>;
        }
        if (m.path) {
          return (
            <Item key={m.key}>
              <Link to={m.path}>
                <Icon type={m.icon}/> {seiIntl.get({key: m.i18n, desc: m.title})}
              </Link>
            </Item>
          );
        }
        return (
          <Item key={m.key}>
            <a className="animated animated-short">
              <Icon type={m.icon}/> {seiIntl.get({key: m.i18n, desc: m.title})}
            </a>
          </Item>
        );
      })}
    </Menu>
  );

  render() {
    const {userName, onMenuClick} = this.props;
    return (
      <DropOption
        overlay={this.getMenuItem(userMenus, onMenuClick)}
        overlayClassName={classNames(styles["avatar-menu"])}
      >
        <span className={classNames(styles.dropDown)}>
          <Avatar icon="user" size="small"/>
          <span className="title">{userName}</span>
          <Icon
            type="caret-down"
            style={{fontSize: '8px', color: '#bfbfbf', marginLeft: '4px'}}
          />
        </span>
      </DropOption>
    );
  }
}
